<template>
    <van-tabbar v-model="active" route active-color="red">
        <van-tabbar-item replace to="/cook" icon="fire">菜谱大全</van-tabbar-item>
        <van-tabbar-item replace to="/classify" icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item replace to="/map" icon="wap-home-o">地图</van-tabbar-item>
        <van-tabbar-item replace to="/more" icon="more">更多</van-tabbar-item>
    </van-tabbar>
</template>
  
<script setup lang="ts">
import { ref } from 'vue';

// 根据路由切换动态的设置 索引值  也可以设置 name
const active = ref<number>(0);
</script>
  
<style scoped></style>@!